<template>
    <div>
        <el-container style=" font: 16px '微软雅黑';">
            <el-header style="text-align: right; font-size: 18px; background-color: #F3F3F3;height: 50px">
                <div
                        style="float: left; border-left: 4px solid limegreen;margin: 13px 0px 0px -20px;">&nbsp;&nbsp;&nbsp; 添加微圈</div>
                <el-button @click="refresh">
                    <i class="el-icon-refresh"></i>
                    刷新
                </el-button>
                <el-button @click="backHome">
                    <i class="el-icon-close"></i>
                    关闭
                </el-button>
                <el-button @click="back">
                    <i class="el-icon-arrow-left"></i>
                    返回
                </el-button>
            </el-header>
            <el-container>
                <el-main>
                    <div>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="文章标题" prop="title">
                                        <el-input v-model="form.title" :value="form.createDate"> </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="内容类型" prop="cate">
                                        <!--                                        // select框绑定的值是selectVal，也就是treeData里的value-->
                                        <el-select
                                                v-model="selectVal"
                                                placeholder="请选择..."
                                                size="mini"
                                                clearable
                                                ref="select"
                                                style="width: 533px"
                                        >
                                            <!--                                            // 设置一个input框用作模糊搜索选项功能-->
                                            <el-input
                                                    class="input"
                                                    placeholder="此处键入'关键词'搜索查询"
                                                    prefix-icon="el-icon-search"
                                                    v-model="treeFilter"
                                                    size="mini"
                                                    clearable
                                            ></el-input>
                                            <!--                                            // 设置一个隐藏的下拉选项，选项显示的是汉字label，值是value-->
                                            <!--                                            // 如果不设置一个下拉选项，下面的树形组件将无法正常使用-->
                                            <el-option hidden key="id" :value="selectVal" :label="selectName">
                                            </el-option>
                                            <!--                                            // 设置树形控件-->
                                            <el-tree
                                                    :data="treeData"
                                                    :props="defaultProps"
                                                    @node-click="handleNodeClick"
                                                    :expand-on-click-node="false"
                                                    :check-on-click-node="true"
                                                    ref="tree"
                                                    node-key="id"
                                                    :default-expand-all="true"
                                                    :filter-node-method="filterNode"
                                            >
                                                <!--// @node-click：树形控件选项点击事件
                                                // :expand-on-click-node：使树形控件只有点箭头图标的时候才会展开或者收缩节点，为false则点文字直接选中该项
                                                // :check-on-click-node：是否在点击节点的时候选中节点，当选项为复选框时有用，这个属性可以删除
                                                // :default-expand-all：默认展开所有节点
                                                // :filter-node-method：实现搜索功能的筛选方法
                                                -->
                                                <span slot-scope="{ data }">
<!--                                                    //选项用插槽来显示，匹配搜索功能，并方便增加tag标签需求-->
                                                      <span>{{ data.label }}</span>

                                                </span>
                                            </el-tree>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <div class="fwb" style="border: 1px solid #ccc; margin-top: 10px;">
                                        <!-- 工具栏 -->
                                        <Toolbar
                                                style="border-bottom: 1px solid #ccc"
                                                :editor="editor"
                                                :defaultConfig="toolbarConfig"
                                        />
                                        <!-- 编辑器 -->
                                        <Editor
                                                style="height: 380px; overflow-y: hidden;"
                                                :defaultConfig="editorConfig"
                                                v-model="html"
                                                @onChange="onChange"
                                                @onCreated="onCreated"
                                        />
                                    </div>
                                    <div style="margin-top: 10px;">
                                <textarea
                                        v-model="html"
                                        readonly
                                        style="width: 100%; height: 165px; outline: none;"
                                ></textarea>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-form>
                        <span style="position: relative;top: -781px;left: 627px;">
                            <el-button type="danger" plain @click="savingDrafts">保存草稿</el-button>
                            <el-button type="success" plain @click="publishArticle">发布文章</el-button>
                        </span>
                    </div>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    export default {
        name: "AddMicro",
        components:{Editor, Toolbar },
        data(){
            return{
                form:{
                    title:"",
                    cate:"",
                    createDate:""
                },
                selectVal: "", // select框的绑定值
                selectName: "", // select框显示的name
                treeFilter: "", // 搜索框绑定值，用作过滤
                // 树形控件数据
                treeData: [],
                defaultProps: {
                    children: "children",
                    label: "name",
                },
                editor: null,
                html: '<p></p>',
                toolbarConfig: {
                    // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
                    // excludeKeys: [ /* 隐藏哪些菜单 */ ],
                },
                editorConfig: {
                    placeholder: '请输入内容...',
                    // autoFocus: false,

                    // 所有的菜单配置，都要在 MENU_CONF 属性下
                    MENU_CONF: {}
                }
            }
        },
        watch: {
            // 搜索过滤，监听input搜索框绑定的treeFilter
            treeFilter(val) {
                this.$refs.tree.filter(val);
                // 当搜索框键入值改变时，将该值作为入参执行树形控件的过滤事件filterNode
            },
        },
        methods:{
            //返回首页
            backHome(){},
            //返回上一级页面
            back(){
                this.$router.back();
            },
            //刷新
            refresh(){},
            getCateDate(){
                this.$http.get('/courseClass/getTreeNode')
                    .then(res => {
                        this.treeData = res.data
                    })
            },
            onCreated(editor) {
                this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
            },
            onChange(editor) {
                console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
            },
            // 结构树点击事件
            handleNodeClick(data) {
                this.selectVal = data.id; // select绑定值为点击的选项的value
                this.form.cate = this.selectVal;
                this.selectName = data.label; // input中显示值为label
                this.treeFilter = ""; // 点击后搜索框清空
                this.$refs.select.blur(); // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
            },
            // 模糊查询（搜索过滤），实质为筛选出树形控件中符合输入条件的选项，过滤掉其他选项
            filterNode(value, data) {
                if (!value) return true;
                let filterRes = data.label.indexOf(value) !== -1;
                return filterRes;
            },
            // 选项卡标签（可忽略，增值迭代需求）
            /*filterorgType(val) {
                let arr = this.tagList.filter((item) => {
                    return item.value == val;
                });
                return arr.length ? arr[0].label : "";
            },*/
            insertTextHandler() {
                const editor = this.editor
                if (editor == null) return
                editor.insertText(' hello ')
            },
            printEditorHtml() {
                const editor = this.editor
                if (editor == null) return
                console.log(editor.getHtml())
            },
            disableHandler() {
                const editor = this.editor
                if (editor == null) return
                editor.disable()
            },
            savingDrafts(){
                const editor = this.editor;
                let url = '/microcircle/addmic';
                var insert = new URLSearchParams();
                insert.append("articleTitle",this.form.title);
                insert.append("articleCategrayId",this.form.cate);
                insert.append("userId","1000002");
                insert.append("articleContent",this.html)
                this.$http.post(url,insert,{
                    headers:{
                        'C':'application/x-www-form-urlencoded'
                    }
                }).then(res => {
                    if (res){
                        this.html='<p></p>'
                        this.$message.success("保存成功")
                    }

                })
            },
            publishArticle(){
                const editor = this.editor


            }

        },
        created() {
            this.getCateDate();
        },
        mounted() {
            // 模拟 ajax 请求，异步渲染编辑器
            /*setTimeout(() => {
                this.html = '<p>Ajax 异步设置内容 HTML</p>'
            }, 1500)*/
        },
        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
        }
    }
</script>

<style scoped>
    .el-input--mini .el-input__inner {
        height: 38px;
        line-height: 28px;
    }
</style>